<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="tips">

    </div>
</body>
<script>
    // 设置计时器

    // 把函数当成参数  传入到另一个函数中,由另一个函数代为执行  =>  回调函数
    // 可以理解为 => 提前规定好了要执行的内容(放在函数中)  

    // setInterval(callbackFn,interval,arg1,arg2...argN);   每隔特定时间 指定 某个操作(函数)
    // callbackFn  传入一个函数用于指定每次间隔时间执行的内容  (提前指定了要执行的内容 => 函数(命名函数 匿名函数 => 把函数作为参数传入))
    // interval    间隔时间(单位是毫秒)
    // arg1,arg2...argN  作为callbackFn的实际参数传入

    // 返回值  数字 => 计时器的编号

    // 注意: 计时器从启动 到 开始执行 需要先等待对应的间隔时间
    var tips = document.getElementById("tips");

    countDown("2021-11-11 00:00:00");
    var time = setInterval('countDown("2021-11-11 00:00:00")', 1000);

    function countDown(date) {
        var future = new Date(date);
        // console.log(future);

        var now = new Date();
        // console.log(now);

        var time = parseInt((future - now) / 1000);
        // console.log(time);
        if (time > 0) {  // 未来时间 > 当前时间
            var day = parseInt(time / (60 * 60 * 24));

            // 总的时间 / 一小时 => 小时总的倍数  
            // 小时总的倍数 % 一天(24)  => 不满一天的小时数
            var hour = parseInt(time / (60 * 60)) % 24;
            var minute = parseInt(time / 60) % 60;
            var second = time % 60;
            // console.log(day, hour, minute, second);

            // 距离双12剁手还有xx天xx时xx分xx秒
            tips.innerText = "距离双12剁手还有:" + day + "天" + hour + "时" + minute + "分" + second + "秒";
        } else { //倒计时结束
            clearInterval(timer);
            tips.innerText = "双11开始";
        }
    }
    // console.log(time)
</script>

</html>